<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向过滤器</title>
</head>
<body>
<div id="two-way-filter-demo">
    <input type="text" v-model="money | currencyDisplay">
    <p>Model value:{{money}}</p>
    <input v-model="userInput">
    <p>{{msg | concat userInput}}</p>
</div>
<script src="../js/libs/vue.js"></script>
<script>
    new Vue({
        el: '#two-way-filter-demo',
        data: {
            money: 2333.333,
            msg: '2333'
        },
        filters: {
            currencyDisplay: {
                read: function (val) {
                    return '$' + val.toFixed(2);
                },
                write: function (val, oldVal) {
                    var number = +val.replace(/[^\d.]/g, '');
                    return isNaN(number) ? '0' : parseFloat(number.toFixed(2));
                }
            }
        }
    });
    //动态参数
    Vue.filter('concat', function (value, input) {
        //input = 'this.userInput'
        return value + input
    })
</script>
</body>
</html>